function MainComponent() { const [isAsleep, setIsAsleep] = React.useState(false); const [startTime, setStartTime] = React.useState(null); const [timeSlept, setTimeSlept] = React.useState(''); const [savedSleepTime, setSavedSleepTime] = React.useState([]); const audioRef = React.useRef(null); React.useEffect(()=>{ let interval = null; if (isAsleep && startTime) { interval = setInterval(()=>{ const now = new Date(); setTimeSlept(calculateTimeSlept(now)); }, 1000); } return ()=>clearInterval(interval); }, [ isAsleep, startTime ]); const calculateTimeSlept = (now)=>{ const difference = now - startTime; const hours = Math.floor(difference % (1000 * 60 * 60 * 24) / (1000 * 60 * 60)); const minutes = Math.floor(difference % (1000 * 60 * 60) / (1000 * 60)); const seconds = Math.floor(difference % (1000 * 60) / 1000); return `${hours}h ${minutes}m ${seconds}s`; }; const handleOnSubmit = (event)=>{ event.preventDefault(); setStartTime(new Date()); setIsAsleep(true); audioRef.current.play(); }; const handleWakeUp = ()=>{ const now = new Date(); setIsAsleep(false); setStartTime(null); setTimeSlept(''); setSavedSleepTime([ ...savedSleepTime, calculateTimeSlept(now) ]); audioRef.current.pause(); audioRef.current.currentTime = 0; }; const handleClearSavedTimes = ()=>{ setSavedSleepTime([]); }; const sleepButtonStyles = isAsleep ? 'cursor-not-allowed opacity-50' : 'hover:bg-blue-400'; const savedSleepRecords = savedSleepTime.map((record, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-[#F4F7F5]", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, record)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#2E3A59]", __source: { fileName: "", lineNumber: 57, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-lobster text-[#F4F7F5] text-4xl mb-10", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "SleepyTime"), !isAsleep && /*#__PURE__*/ React.createElement("form", { onSubmit: handleOnSubmit, className: "flex flex-col", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isAsleep, className: `font-roboto text-white bg-[#4C5C96] py-2 px-4 rounded ${sleepButtonStyles}`, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Fall Asleep")), isAsleep && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: handleWakeUp, className: "font-roboto text-white bg-[#96a1eb] py-2 px-4 mt-5 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Wake Up"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#F4F7F5] mt-5", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "You have slept for: ", timeSlept)), /*#__PURE__*/ React.createElement("ul", { className: "mt-10", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, savedSleepRecords), savedSleepTime.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: handleClearSavedTimes, className: "font-roboto text-white bg-red-500 py-2 px-4 mt-5 rounded", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "Clear Saved Times"), /*#__PURE__*/ React.createElement("audio", { loop: true, ref: audioRef, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "/relaxing-music.mp3", type: "audio/mp3", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }))); }